<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <script src="../vue.js"></script>
  </head>

  <body>
    <div id="app">
      <!-- 当组件被注册完并且被使用的时候,则会实例化VueComponent构造函数,得到一个组件实例,组件内部的数据方法等全部都在组件实例上 -->
      <Header1></Header1>
      <!-- 每次组件被使用的时候,都会实例化一个VueComponent构造函数 -->
      <Header1></Header1>
    </div>
    <script>
      /* 
        组件的定义和使用
            定义组件
            1.定义组件使用Vue.extend({})方法
            2.extend方法接受一个配置对象作为参数,配置对象类似于new Vue时传递的配置对象(没有el)
            3.每个组件都有自己的生命周期,数据,方法,计算属性,watch等等
            4.定义组件的时候,要添加一个name属性,代表当前组件的名称
            5.定义好的组件其实就是一个VueComponent构造函数
            组件的注册
            1.如果想要在一个组件或者实例中使用另外一个组件,则需要注册
            2.使用components配置项进行注册组件
            组件的使用
            1.在模板中 使用标签的方式 使用已经注册过的组件
            2.当组件被注册完并且被使用的时候,则会实例化VueComponent构造函数,得到相对应的组件实例
        */
      Vue.config.productionTip = false;

      const Header1 = Vue.extend({
        name: "Header1",
        template: `<h1>Header1组件--{{message}}</h1>`,
        data() {
          //组件中数据方法等也都是放在对应组件实例上的
          return {
            message: "hello 组件",
          };
        },
        mounted() {
          //组件中 方法的this都是指向组件实例
          console.log("header1组件", this);
        },
      });
      /* 每一个组件都是一个叫做VueComponent的构造函数 */
      console.log(Header1);
      const vm = new Vue({
        el: "#app",
        //想要在组件中使用另一个组件,则需要注册
        components: {
          Header1: Header1,
        },
        data() {
          return {};
        },
      });
    </script>
  </body>
</html>
